<!-- 「赚喵豆」页面（分包页面） -->
<!-- XXX 已弃用，考虑删除 -->
<template>
  <div class="page">
    <div class="body">
      <!-- 背景 -->
      <div class="bg">
        <image
          class="bg-img"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/get-miaodou-bg.png"
        />
      </div>
      <!-- 导航栏 -->
      <uni-nav-bar
        class="nav-bar"
        color="#ffffff"
        fixed="true"
        title="赚喵豆"
        status-bar="true"
        :border="false"
        left-icon="left"
        @clickLeft="back"
      />
      <!-- 喵豆数量 -->
      <div class="miaodou-num">
        <!-- 我的喵豆 -->
        <div class="text">
          我的喵豆
        </div>
        <!-- 当前喵豆数量 -->
        <div class="num">
          <text class="num-text">
            {{ miaodouStatus.availableMiaodou }}
          </text>
        </div>
        <!-- 今天获得的喵豆 -->
        <div class="today">
          <text>今日获得喵豆：</text>
          <text class="today-week-num">
            {{ miaodouStatus.todayMiaodou }}
          </text>
        </div>
        <!-- 去抽奖 -->
        <div
          class="side-btn"
          @click="sideBtnClick"
        >
          <image
            class="side-btn-icon"
            src="/static/icons/common/gift.png"
          />
          去兑换
        </div>
      </div>
      <!-- 任务 -->
      <div class="task">
        <!-- 每日任务 -->
        <div class="daily-task-list">
          <div class="task-list-name">
            <div class="decoration" />
            <text class="text">
              每日任务
            </text>
          </div>
          <!-- 任务列表内容 -->
          <div class="task-list-content">
            <!-- 邀请新用户任务 -->
            <div class="task-item invite-friend">
              <image
                class="icon-img"
                src="@/static/icons/get-miaodou/invite-friends.svg"
              />
              <div class="task-name">
                <text class="name-text">
                  邀请新用户奖励300喵豆
                </text>
                <!-- 说明按钮 -->
                <div class="question-icon">
                  <image
                    src="/static/icons/common/question.png"
                    class="question-icon-img"
                    @click="changeBubbleType('invite-friend')"
                  />
                  <!-- 「邀请好友赚喵豆」任务说明气泡 -->
                  <div
                    v-if="bubbleType === 'invite-friend'"
                    class="invite-friend-bubble"
                  >
                    <!-- 气泡图片 -->
                    <image
                      class="bubble-img"
                      src="https://ustatic.hudongmiao.com/joymew-host-contest/get-miaodou-invite-friend-bubble.png"
                    />
                    <div class="bubble-text">
                      邀请1位已经是嗨喵注册用户的好友参与活动（被您邀请的好友通过您的分享链接进入活动小程序页面并成功领取奖励的喵豆即视为您邀请好友成功），平台将奖励您50喵豆，以此累加；如您邀请1位新用户参与本次活动，则平台将奖励您500喵豆（新用户邀请奖励将在新用户使用嗨喵大屏互动完成一场有效活动之后发放到您的活动账户）。
                    </div>
                  </div>
                </div>
              </div>
              <!-- 任务描述 -->
              <div class="desc">
                <text class="desc-text">
                  新用户注册并使用一场有效活动
                </text>
              </div>
              <!-- 右侧按钮 -->
              <button
                class="right-btn"
                open-type="share"
              >
                分享
              </button>
            </div>
            <!-- 「完成一场有效活动」任务 -->
            <div class="task-item">
              <image
                class="icon-img"
                src="@/static/icons/get-miaodou/complete-activity.svg"
              />
              <div class="task-name">
                <text class="name-text">
                  完成一场有效活动
                </text>
                <!-- 说明按钮 -->
                <div class="question-icon">
                  <image
                    src="/static/icons/common/question.png"
                    class="question-icon-img"
                    @click="changeBubbleType('complete-activity')"
                  />
                  <!-- 「完成一场有效活动」任务说明气泡 -->
                  <div
                    v-if="bubbleType === 'complete-activity'"
                    class="complete-activity-bubble"
                  >
                    <!-- 气泡图片 -->
                    <image
                      class="bubble-img"
                      src="https://ustatic.hudongmiao.com/joymew-host-contest/get-miaodou-complete-activity-bubble.png"
                    />
                    <div class="bubble-text">
                      单场活动签到人数超过30人即认为是真实有效活动。
                    </div>
                  </div>
                </div>
              </div>
              <!-- 任务描述 -->
              <div class="desc">
                <text class="desc-text">
                  奖励200喵豆
                </text>
              </div>
              <!-- 「已完成」按钮 -->
              <div
                v-if="taskStatus.isFinishActivity"
                class="right-btn done"
              >
                已完成
              </div>
            </div>
          </div>
        </div>
        <!-- 流水任务 -->
        <div class="flow-task-list">
          <!-- 任务列表名称 -->
          <div class="task-list-name">
            <div class="decoration" />
            <text class="text">
              流水任务
            </text>
            <text class="desc">
              （系统自动发放）
            </text>
          </div>
          <!-- 任务列表内容 -->
          <div class="task-list-content">
            <div
              v-for="taskItem in flowTaskList"
              :key="taskItem.id"
              class="task-item"
            >
              <!-- 图标 -->
              <image
                class="icon-img"
                :src="taskItem.icon"
              />
              <!-- 任务名称 -->
              <text class="task-name">
                {{ taskItem.name }}
              </text>
              <!-- 喵豆奖励 -->
              <div class="miaodou-reward">
                {{ taskItem.miaodouRewardText }}
              </div>
              <!-- 任务描述 -->
              <div class="desc">
                {{ taskItem.desc }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FLOW_TASK_LIST } from '@/static/constant/view-constant';
import { useUser } from '@/stores/user';
import { back } from '@/utils/navigate';
import { invite618 } from '@/utils/others';

const user = useUser();
const { userInfo } = user;
const { miaodouStatus, taskStatus } = storeToRefs(user);

// 挂载时获取今日喵豆和本周喵豆情况
onMounted(() => {
  console.log('onMounted');
  user.getTodayAndWeekMiaodou();
});

/** 侧边按钮点击事件 */
const sideBtnClick = () => {
  uni.switchTab({ url: '/pages/redeem-gifts' });
};

// 分享时的回调
onShareAppMessage(() => invite618(userInfo));

// #region  提示气泡相关
// 当前显示气泡类型
const bubbleType = ref<BubbleType>('no');

const changeBubbleType = (type: BubbleType) => {
  bubbleType.value = type;
  // 如果不是'no'，则5秒后修改回'no'
  const timeout = setTimeout(() => {
    bubbleType.value = 'no';
    clearTimeout(timeout);
  }, 5000);
};
// #endregion

/** 流水任务列表 */
const flowTaskList = ref(FLOW_TASK_LIST);
</script>

<style lang="scss" scoped>
// 设置导航栏透明
::v-deep .uni-navbar {
  .uni-navbar__content,
  .uni-navbar__header {
    background-color: rgba($color: #000, $alpha: 0%) !important;
  }
}

.page {
  position: relative;

  width: 100vw;
  height: 100vh;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .body {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    grid-template:
      "nav-bar" auto
      "miaodou-num" 200px
      "task" 1fr
      "." 44px
      / auto;

    // 背景
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -99999;

      width: 100vw;
      height: 100%;

      background-color: #fcf8f9;

      .bg-img {
        width: 100vw;
        height: 61.5385vw;
      }
    }

    // 导航栏
    .nav-bar {
      grid-area: nav-bar;
    }

    // 喵豆数量
    .miaodou-num {
      grid-area: miaodou-num;

      position: relative;

      display: grid;
      grid-template:
        ". ." 25px
        ". text" 15px
        ". ." 10px
        ". num" 36px
        ". ." 20px
        ". today" 18px
        / 20px 1fr;
      align-items: start;
      justify-items: start;

      color: #fff;

      // 「我的喵豆」文字
      .text {
        grid-area: text;

        font-size: 17px;
        font-weight: bold;
      }

      // 当前喵豆数量
      .num {
        grid-area: num;

        font-size: 36px;
        font-weight: bold;
      }

      // 今天获得的喵豆、本周获得的喵豆
      .today {
        font-size: 15px;

        .today-week-num {
          font-size: 13px;
          font-weight: 400;
          color: #ff2459;
        }
      }

      // 今天获得的喵豆
      .today {
        grid-area: today;
      }

      // 去抽奖
      .side-btn {
        position: absolute;
        top: 22px;
        right: 0;

        width: 85px;
        height: 32px;

        background: #ff8e95;
        border-radius: 15px 0 0 15px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 15px;
        line-height: 24px;
        color: #fff7ce;
        text-align: center;

        .side-btn-icon {
          margin-right: 4px;

          width: 22px;
          height: 22px;
        }
      }
    }

    // 任务
    .task {
      grid-area: task;
      justify-self: center;

      display: flex;
      flex-direction: column;
      align-items: center;

      // 任务列表
      .daily-task-list {
        margin-top: 12px;

        width: calc(100vw - 32px);

        background: #fff;
        border-radius: 8px;

        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;

        //任务列表名称
        .task-list-name {
          width: 100%;
          height: 28px;

          background: #f9f9f9;
          border-radius: 8px 8px 0 0;

          display: flex;
          align-items: center;
          justify-content: flex-start;

          // 名称前的装饰
          .decoration {
            width: 9px;
            height: 9px;

            border: 1.5px solid #ff2459;
            border-radius: 50%;
          }

          // 名称
          .text {
            margin-left: 10px;

            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
            color: #333;
          }

          // 注释
          .desc {
            font-size: 15px;
            color: #8d8d8d;
          }
        }

        // 任务列表内容
        .task-list-content {
          margin-top: 16px;

          width: 100%;

          display: grid;
          grid-template-rows: auto;
          row-gap: 25px;

          // 任务列表项
          .task-item {
            width: 100%;

            display: grid;
            grid-template:
              "icon . name  . right" auto
              "icon . desc  . right" 1fr
              / 40px 8px 1fr 0 20.5128vw;
            row-gap: 2px;
            align-items: center;

            // 任务图标
            .icon-img {
              grid-area: icon;

              width: 10.2564vw;
              height: 10.2564vw;
            }

            // 任务名称
            .task-name {
              grid-area: name;

              position: relative;

              font-size: 17px;
              font-weight: 600;
              color: #333;

              // 说明按钮
              .question-icon {
                margin-left: 5px;

                position: relative;

                width: 12px;
                height: 12px;

                display: inline-block;

                .question-icon-img {
                  width: 100%;
                  height: 100%;
                }

                // 「邀请好友赚喵豆」任务说明气泡
                .invite-friend-bubble {
                  position: absolute;
                  bottom: 12px;
                  left: 50%;
                  z-index: 99999;

                  width: 160px;
                  height: 115px;

                  transform: translateX(-50%);

                  .bubble-img {
                    position: absolute;
                    z-index: -999;

                    width: 100%;
                    height: 100%;
                  }

                  // 文本
                  .bubble-text {
                    position: absolute;
                    top: 6px;
                    left: 50%;

                    width: 145px;

                    transform: translateX(-50%);

                    font-size: 7px;
                    line-height: 10.5px;
                    color: #333;

                    // 文字两端对齐
                    text-align: justify;
                  }
                }

                // 「完成一场有效活动」任务说明气泡
                .complete-activity-bubble {
                  position: absolute;
                  bottom: 10px;
                  left: 50%;
                  z-index: 99999;

                  width: 76px;
                  height: 52px;

                  transform: translateX(-50%);

                  .bubble-img {
                    position: absolute;
                    z-index: -999;

                    width: 100%;
                    height: 100%;
                  }

                  // 文本
                  .bubble-text {
                    position: absolute;
                    top: 6px;
                    left: 50%;

                    width: 65px;

                    transform: translateX(-50%);

                    font-size: 7px;
                    line-height: 12px;
                    color: #333;

                    // 文字两端对齐
                    text-align: justify;
                  }
                }
              }
            }

            // 喵豆奖励
            .miaodou-reward {
              grid-area: miaodou-reward;
              justify-self: start;

              font-size: 15px;
              color: #ff2459;
            }

            // 任务描述
            .desc {
              grid-area: desc;

              font-size: 13px;
              color: #999;

              .emphasize {
                color: #ff2459;
              }
            }

            // 右侧按钮
            .right-btn {
              grid-area: right;

              width: 20.5128vw;
              height: 8.4615vw;

              background: linear-gradient(90deg, #FF3C43 0%, #FF9502 100%);
              border-radius: 36px;

              font-size: 15px;
              line-height: 33px;
              color: #fff;
              text-align: center;

              &.done {
                background: #b0b0b0;
              }
            }
          }
        }
      }

      .flow-task-list {
        margin-top: 12px;

        width: calc(100vw - 32px);

        background: #fff;
        border-radius: 8px;

        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;

        //任务列表名称
        .task-list-name {
          width: 100%;
          height: 28px;

          background: #f9f9f9;
          border-radius: 8px 8px 0 0;

          display: flex;
          align-items: center;
          justify-content: flex-start;

          // 名称前的装饰
          .decoration {
            width: 9px;
            height: 9px;

            border: 1.5px solid #ff2459;
            border-radius: 50%;
          }

          // 名称
          .text {
            margin-left: 10px;

            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
            color: #333;
          }

          // 注释
          .desc {
            font-size: 15px;
            color: #8d8d8d;
          }
        }

        // 任务列表内容
        .task-list-content {
          margin-top: 16px;

          width: 100%;

          display: grid;
          grid-template-rows: auto;
          row-gap: 25px;

          // 任务列表项
          .task-item {
            width: 100%;

            display: grid;
            grid-template:
              "icon . name . miaodou-reward" auto
              "icon . desc desc desc " 1fr
              / 40px 8px auto 6px 1fr;
            row-gap: 1px;
            align-items: center;

            // 任务图标
            .icon-img {
              grid-area: icon;

              width: 10.2564vw;
              height: 10.2564vw;
            }

            // 任务名称
            .task-name {
              grid-area: name;

              position: relative;

              font-size: 4.359vw;
              font-weight: 600;
              color: #333;
            }

            // 喵豆奖励
            .miaodou-reward {
              grid-area: miaodou-reward;
              justify-self: start;

              font-size: 3.8462vw;
              color: #333;
            }

            // 任务描述
            .desc {
              grid-area: desc;

              font-size: 13px;
              color: #999;

              .emphasize {
                color: #ff2459;
              }
            }
          }
        }
      }
    }
  }
}
</style>
